<template>
  <div id="app">
    <video autoplay loop muted id="bgvid">
      <source src="../../assets/background-video.mp4" type="video/mp4" />
    </video>
    <div class="login-containe">
      <!-- 标题 -->
      <h1 class="login_title">千锋学员管理系统</h1>
      <i
        :class="[
          'jiaobiao',
          'iconfont',
          isErweiLogin ? 'icon-erweimajiaobiao1' : 'icon-diannaojiaobiao',
        ]"
        @click="isErweiLogin = !isErweiLogin"
      ></i>

      <!-- 常规登录 -->
      <el-form
        :model="loginFrom"
        status-icon
        :rules="rules"
        ref="loginFrom"
        label-width="100px"
        class="login-loginFrom"
        v-if="isErweiLogin"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="loginFrom.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="loginFrom.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input
            v-model="loginFrom.captcha"
            type="text"
            autocomplete="off"
            oninput="if(value.length>6)value=value.slice(0,5)"
            maxlength="5"
            @keydown.native.enter="submitForm('loginFrom')"
          ></el-input>
          <!-- @keydown.native.enter表示的是触发原生事件 -->
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('loginFrom')"
            >提交</el-button
          >
          <el-button @click="resetForm('loginFrom')">重置</el-button>
        </el-form-item>
        <!-- 验证码 -->
        <span
          v-html="Captcha_img"
          class="captcha_info"
          @click="refrashCaptaha"
        ></span>
      </el-form>
      <!-- 切换二维码登录 -->
      <div class="erwei" v-else>
        <div>
          <img :src="imgurl" alt="" class="erWeiImg" />
          <div
            class="erWeimask"
            v-show="isErWeiMask"
            :style="qrstyle"
            @click="updateErWei"
          ></div>
        </div>
        <p class="erWeiTitle" ref="erWeiTitle">请使用微信扫码登录</p>
      </div>
    </div>
  </div>
</template>

<script>
var validateCaptcha = (rule, value, callback) => {
  //caLlback只要传参了,表示表单验证不通过，不传参表示表单验证通过
  //vaLue就是在input中的输入值
  //rule是个对象,就是验证对象
  if (!value) {
    return callback(new Error("验证码不能为空"));
  } else {
    callback();
  }
};
var validateUsername = (rule, value, callback) => {
  //用户名正则，4到16位（字母，数字，下划线，减号）
  var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
  if (uPattern.test(value)) {
    //表示校验成功，则返回空
    callback();
  } else {
    callback("输入4到16位（字母，数字，下划线，减号）");
  }
};
var validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
// 登录的流程
//1.收集用户的用户名和密码，发送给服务端
//2.服务端会进行校验，校验通过,返回用户信息和token
//3.将token存到本地存储

import {
  getCaptchaApi,
  verifyCaptchaApi,
  loginApi,
  weChatUrl,
  weChatLogin,
} from "@/api"; //获取验证码
import { mapMutations } from "vuex"; //为了获取用户的信息
import io from "socket.io-client"; //引入文件
import qr from "qrcode"; //引入创建二维码的文件
// 引入二维码扫码成功的遮罩
import codeSuccess from "../../assets/codeSuccess.png";
// 二维码扫码失败的遮罩
import codeFaile from "../../assets/codeFaile.png";
export default {
  data() {
    return {
      Captcha_img: "", //验证码图片
      imgurl: {}, //二维码图片
      isErweiLogin: true,
      isErWeiMask: false, //控制二维码的遮罩
      loginFrom: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        //表单校验
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
      qrstyle: {
        backgroundImage: `url(${codeSuccess})`,
      },
    };
  },
  //使用侦听器检测登录的状态
  watch: {
    isErweiLogin(newValue, oldValue) {
      //1.判断用户是否切换到二维码登人
      //2.如果是二准码登入。那么我们就要使用scaket.io和服务器进行连按”
      // console.log(newValue);
      let socket = io("ws://chst.vip"); //连接到服务器
      socket.on("connectSuccess", (data) => {
        //连接成功
        // console.log(data);//打印的结果中就有我们要利用的sid
        let { sid } = data; //将sid从data中结构出来
        localStorage.setItem("qf-sid", sid);
        // 获取二维码地址，生成二维码图片
        this.getWeiChatCode(); //调用上m面的生成二维码的方法
      });
      //扫码成功的事件
      socket.on("scancodeSuccess", (data) => {
        // console.log(data);
        if (data.state) {
          // 让二维码遮罩出现
          this.isErWeiMask = true;
          weChatLogin(data.wechatCode).then((res) => {
            // console.log(res);
            //登入成功
            this.SET_USER_INFO(res.data.userInfo); //表示调用获取用户信息的方法，并将用户信息传递过去
            // 1.将token存到本地
            localStorage.setItem("qf-token", res.data.token);
            // 2.将用户信息存到本地
            localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            // 3.跳转页面到主页
            this.$router.push("./"); //跳转页面
            localStorage.setItem(
              "qf-userInfo",
              JSON.stringify(res.data.userInfo)
            );
            //将用户的信息存储到本地，此处之所以是json.stringify 是因为res.data.userInfo是一个对象，我们是不能存储对象的所以要转换为json格式
            //4.将用户可访问的项目存到本地(按钮级鉴权)
            localStorage.setItem('permission_button',JSON.stringify(res.data.permission.buttons))
          });
        } else {
          this.$message.error("登录失败，请重新扫码登录");
        }
      });
      //二维码失效的事件
      socket.on("invalidCode", (data) => {
        // console.log(data);
        this.qrstyle.backgroundImage = `url(${codeFaile})`;
        this.isErWeiMask = true; //显示遮罩
   
        this.$refs.erWeiTitle.innerHTML='点击更新二维码'
      });
    },
  },
  mounted() {
    // 调用获取验证码的方法
    this.refrashCaptaha();
  },
  methods: {
    ...mapMutations(["SET_USER_INFO"]), //mapMutations要在methods中映射
    updateErWei() {
      //点击刷新二维码
      this.getWeiChatCode();
      this.isErWeiMask = false; //显示遮罩
      this.$refs.erWeiTitle.innerHTML='请使用微信扫码登录'
    },
    //封装一个获取微信二维码的方法
    getWeiChatCode() {
      //传入一个值 sid
      //调用获取二维码地址的api
      let sid = localStorage.getItem("qf-sid");
      // 为了解决二维码失效后，我们刷新二维码再次登陆，会出现二维码失效的遮罩，所以让背景图设置为成功的状态
      this.qrstyle.backgroundImage=`url(${codeSuccess})` 
      // console.log(sid);
      if (!sid) {
        this.$message.error("没有传入sid");
        return;
      }
      weChatUrl(sid).then((res) => {
        // console.log(res); //打印的结果中就有我们要获取的二维码的地址
        let qrUrl = res.data.scanCodeUrl; //获取的是微信二维码的地址
        // 地址生成二维码
        // console.log(qrUrl);
        qr.toDataURL(qrUrl, (err, abcurl) => {
          if (err) throw err;
          // console.log(this);
          this.imgurl = abcurl;
          // console.log(this.imgurl);
        });
      });
    },
    //普通登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //本地校验通过
          // 验证通过加载过渡动画
          const loading = this.$loading({
            lock: true,
            text: "正在登录...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });

          //1.校验验证码是否正确，如果正确再发送登入请求校验用户名
          verifyCaptchaApi(this.loginFrom.captcha).then((res) => {
            // console.log(res);
            //验证码输入正确，进行登录，
            // 验证码输入错误，进行一个提示
            if (res.data.state) {
              //验证校验成功
              //验证成功，调用登录接口 登录接口要传入两个数据
              loginApi(this.loginFrom.username, this.loginFrom.password).then(
                (res) => {
                  // console.log(res);
                  // 校验验证码和密码是否成功
                  if (res.data.state) {
                    //表示登录成功
                    // 登录成功后的操作
                    // 1.将token存到本地
                    // 2.跳转页面
                    //3.将用户信息存到vuex中
                    // console.log(res.data.userInfo); //打印的就是登录后的账号的用户信息
                    this.SET_USER_INFO(res.data.userInfo); //表示调用获取用户信息的方法，并将用户信息传递过去
                    this.$message({
                      showClose: true,
                      message: "欢迎登录",
                      type: "success",
                      duration: 1000,
                    });
                    localStorage.setItem(
                      "qf-userInfo",
                      JSON.stringify(res.data.userInfo)
                    );
                    //将用户的信息存储到本地，此处之所以是json.stringify 是因为res.data.userInfo是一个对象，我们是不能存储对象的所以要转换为json格式
                    localStorage.setItem("qf-token", res.data.token); //将token存储到本地，
                    // 之所以存储到本地是因为，有token存在才会返回数据
                    this.$router.push("./"); //跳转页面

                      //4.将用户可访问的项目存到本地(按钮级鉴权)
            localStorage.setItem('permission_button',JSON.stringify(res.data.permission.buttons))
                    // 页面跳转后关闭过度动画
                    loading.close();
                  } else {
                    this.$message({
                      showClose: true,
                      message: "用户名或密码错误",
                      type: "error",
                    });
                    // 用户名或密码错误后，关闭过度动画
                    loading.close();
                  }
                }
              );
            } else {
              //验证码校验失败
              this.$message({
                showClose: true,
                message: "验证码输入错误了哦",
                type: "error",
              });
              // 清空验证码
              this.loginFrom.captcha = "";
              //验证码错误再次调用获取验证码的方法
              this.refrashCaptaha();
              // 验证码错误后，关闭过度动画
              loading.close();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置表单的
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 封装获取验证码
    refrashCaptaha() {
      getCaptchaApi().then((res) => {
        // console.log(res.data.img);
        this.Captcha_img = res.data.img;
      });
    },
  },
};
</script>

<style scoped>
source {
  min-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
}

video {
  object-fit: cover;
  position: fixed;
  right: 0px;
  bottom: 0px;
  min-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  background-size: cover;
  z-index: -11;
}
.login-containe {
  width: 400px;
  height: 490px;
  z-index: 9;
  width: 25rem;
  position: fixed;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  border-radius: 11px;
  background: rgba(28, 11, 186, 0.2);
  text-align: center;
  box-sizing: border-box;
}
.login-containe /deep/ .el-form-item__label {
  color: pink;
}
.login-containe /deep/.el-input__inner {
  width: 250px;
  margin-right: 35px;
}
.login_title {
  color: #fff;
  margin-top: 100px;
  margin-bottom: 50px;
}
.login-containe /deep/ .el-form-item__content {
  margin-right: 46px;
}
.el-button + .el-button {
  margin-left: 40px;
}
.login-containe /deep/ .jiaobiao {
  color: #fff;
  font-size: 50px;
  position: absolute;
  top: -1px;
  right: -1px;
  cursor: pointer;
  opacity: 0.8;
}
.login-containe /deep/ .captcha_info {
  display: inline-block;
  position: absolute;
  top: 312px;
  right: 53px;
  width: 150px;
  height: 40px;
  text-align: center;
  cursor: pointer;
}
.login-containe /deep/ .captcha_info svg {
  width: 120px;
}
/* 微信登录 */
.erWeiImg {
  width: 200px;
}
.erWeiTitle {
  color: #fff;
  font-size: 16px;
}
.erwei {
  position: relative;
}
.erWeimask {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: #fff;
  top: 0;
  right: 100px;
  /* background-image: url("../../assets/扫码成功.png"); */
  opacity: 0.8;
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
</style>
